<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 引入样式 -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <script src="../js/vue.min.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <title>elementUI组件库</title>
  </head>
  <body>
    <div id="app">
      <!-- table表格 -->
      <template>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="date" label="日期" width="180">
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="180">
          </el-table-column>
          <el-table-column prop="address" label="地址"> </el-table-column>
        </el-table>
      </template>
      <!-- 分页 -->
      <template>
        <el-pagination
          layout="prev,pager,next"
          :total="count"
          :page-size="pagesize"
        ></el-pagination>
      </template>
      <!-- 步骤条 -->
      <template>
        <el-steps :active="active" finish-status="success">
          <el-step title="步骤 1"></el-step>
          <el-step title="步骤 2"></el-step>
          <el-step title="步骤 3"></el-step>
        </el-steps>

        <el-button style="margin-top: 12px" @click="next">下一步</el-button>
        <span>{{active}}</span>
      </template>
    </div>
    <script type="text/javascript">
      var vue = new Vue({
        el: "#app",
        data: {
          // 得到数据的总条数
          count: 1000,
          // 每页显示的数据
          pagesize: 20,
          // 步骤条状态
          active: 0,
          tableData: [
            {
              date: "2016-05-02",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1518 弄",
            },
            {
              date: "2016-05-04",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1517 弄",
            },
            {
              date: "2016-05-01",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1519 弄",
            },
            {
              date: "2016-05-03",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1516 弄",
            },
          ],
        },
        methods: {
          next: function () {
            vue.active++;
            if (vue.active > 3) {
              vue.active = 0;
            }
          },
        },
      });
    </script>
  </body>
</html>
